<!doctype html>
<!--
@license
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../polymer.html">

<body>
  <x-test></x-test>
  
  <dom-module id="x-foo">
    <template>
      <content></content>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'x-foo'
        });
      });
    </script>
  </dom-module>
  
  <dom-module id="x-test">
    <template>
      Greeting:
      <x-foo id="myCustomElement"></x-foo>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'x-test',
          attached: function() {
            var appendTo = this.$.myCustomElement,
            t = document.createElement('template', 'dom-bind'),
            span = document.createElement('span');
            span.innerHTML = '{{hello}}';
            t.content.appendChild(span);
            t.hello = 'hey';
            Polymer.dom(appendTo).appendChild(t);
          }
        });
      });
    </script>
  </dom-module>
  

</body>

